<template>
  <view class="team-wrap">
    <view class="top">
      <text class="info-text">部分收益因好友未能及时补充相关资料，导致奖励无法结算</text>
    </view>
    <view class="data-list">
      <view  v-for="(item,index) in dataList" :key="index">
        <view class="list-item">
          <view class="item-bg"></view>
          <view class="item-data">
            <view class="item-top">
              <view style="display: flex;align-items: center;">
                <image :src="$store.state.imgBaseUrl + '/icon/team1.png'" class="rank-image" v-if="item.rank==4"></image>
                <image :src="$store.state.imgBaseUrl + '/icon/team3.png'" class="rank-image" v-else-if="item.rank==3"></image>
                <image :src="$store.state.imgBaseUrl + '/icon/team2.png'" class="rank-image" v-else></image>
                <image :src="item.url" class="head-image"></image>
                <view style="display: flex;flex-direction: column;margin-left: 22rpx;">
                  <text class="user-name">{{item.userName }}</text>
                  <text class="user-phone">{{item.mobile }}</text>
                </view>
              </view>
              <image :src="$store.state.imgBaseUrl + '/icon/call.png'" style="width: 59rpx;height: 59rpx;margin-right: 19rpx;" @click="callPhone(item.trueMobile)"></image>
            </view>
            <view class="item-bottom">
              <view class="info-status">
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/license_y.png'" v-if="item.isHaveLicense == 1"></image>
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/license_n.png'" v-else></image>
              </view>
              <view class="info-status" style="margin-left: 9rpx;" v-if="item.isHaveCommissionRemit !== null">
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/commission_remit_y.png'" v-if="item.isHaveCommissionRemit == 1"></image>
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/commission_remit_n.png'" v-else></image>
              </view>
              <view class="info-status" style="margin-left: 9rpx;" v-if="item.rank==4 && item.isHaveCommissionContract !== null">
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/commission_contract_y.png'" v-if="item.isHaveCommissionContract == 1"></image>
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/commission_contract_n.png'" v-else></image>
              </view>
              <view class="info-status" style="margin-left: 9rpx;" v-if="item.rank==4">
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/contract_y.png'" v-if="item.isHaveV4Contract == 1"></image>
                <image class="status-image" :src="$store.state.imgBaseUrl + '/icon/contract_n.png'" v-else></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      dataList:[],
    }
  },
  created() {
    uni.getStorage({ 
      key: 'noSettlementInfo',
      success: (res) => {
        this.dataList = res.data;
      }
    })
  },
  methods:{
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone,
        success: () => {
          
        },
        fail: () => {
          uni.showToast({
            title: '手机号为空',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
  .team-wrap{
    width: 100%;
    height: 100vh;
    background: #fff;
    .top{
      background:rgba(250,250,250,1);
      height: 60rpx;
      width: 100%;
      .info-text{
        height: 60rpx;
        font-size:24rpx;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height: 60rpx;
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
    }
    .data-list{
      .list-item{
        position: relative;
        box-sizing: border-box;
        z-index: 0;
        background: #fff;
        .item-bg{
          width: 690rpx;
          height:197rpx;
          background:rgba(255,255,255,1);
          box-shadow:0rpx 0rpx 27rpx 0rpx rgba(237,237,237,1);
          border-radius:12rpx;
          margin-left: 31rpx;
          margin-right: 31rpx;
          position: absolute;
          left: 0rpx;
          top: 8rpx;
          z-index: -1;
        }
      }
      .item-data{
        display: flex;
        flex-direction: column;
        margin-left: 49rpx;
        margin-right: 49rpx;
        .item-top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .rank-image{
            width: 101rpx;
            height: 133rpx;
          }
          .head-image{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-left: 28rpx;
          }
          .user-name{
            height:26rpx;
            font-size:28rpx;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height: 26rpx;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .user-phone{
            height:18rpx;
            font-size:22rpx;
            font-weight:500;
            color:rgba(153,153,153,1);
            line-height: 18rpx;
            margin-top: 23rpx;
          }
        }
        .item-bottom{
          display: flex;
          margin-top: 17rpx;
          margin-bottom: 21rpx;
          .info-status{
            width:156rpx;
            height:114rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            .status-image{
              width: 100%;
              height: 100%;
            }
            .info-name{
              height:21rpx;
              font-size:22rpx;
              font-weight:300;
              color:rgba(51,51,51,1);
              line-height:21rpx;
              margin-top: 13rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
